<template>
	<view style="position: relative;">
		<view class="toucharea" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchcancel="onTouchEnd"
			@touchend="onTouchEnd">
			<view style="border-radius: 50%;" :style="{width:touchRadius*2+'rpx',height:touchRadius*2+'rpx'}"></view>
		</view>
		<view class="ball" :style="{left:left+'rpx',top:top+'rpx'}" :class="{animation:inDraging===false&&transition}">
			<slot name="ball">
				<view style="width: 60rpx;height: 60rpx;border-radius: 50%;"></view>
			</slot>
		</view>
		<!-- <view class='stick' :class="{animation:inDraging===false&&transition}"
			:style="{height: stickHeight+'rpx',transform:'translateX(-50%)'}">
			<view :style="{transform:'rotate('+(angle/(3.14159/180)-90)+'deg)'}"
				style="transform-origin: 50% 0%;width: 100%;height: 100%;">
				<slot name="stick">
				</slot>
			</view>
		</view> -->
		<view class="bottom">
			<slot name="bottom">
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 触摸识别区域的半径
			touchRadius: {
				type: Number,
				default: 100
			},
			// 杆头的移动范围半径，也就是杆体的长度
			ballMoveRadius: {
				type: Number,
				default: 50
			},
			// 回位动画是否开启
			transition: {
				type: Boolean,
				default: false
			},
			loopTime: {
				type: Number,
				default: 100
			},
		},
		data() {
			return {
				left: 0,
				top: 0,
				stickHeight: 0,
				angle: 0,
				inDraging: false,
				timer: null,
				startLeft: null,
				startTop: null,
			};
		},
		created() {
			const vm = this;

			vm.timer = setInterval(vm.loopFunc, vm.loopTime);
		},
		destroyed() {
			const vm = this;

			if (vm.timer) {
				clearInterval(vm.timer);
				vm.timer = null;
			}
		},
		methods: {
			getDistance(x1, y1, x2, y2) {
				const vm = this;

				let _x = Math.abs(x1 - x2);
				let _y = Math.abs(y1 - y2);
				return Math.sqrt(_x * _x + _y * _y);
			},
			onTouchStart(e) {
				const vm = this;

				let curTouch = e.touches[0];
				vm.startLeft = curTouch.clientX - vm.left;
				vm.startTop = curTouch.clientY - vm.top;
				vm.inDraging = true;
			},
			onTouchMove(e) {
				const vm = this;

				let curTouch = e.touches[0];
				let tleft = (curTouch.clientX - vm.startLeft) * 2;
				let ttop = (curTouch.clientY - vm.startTop) * 2;

				let distance = vm.getDistance(tleft, ttop, 0, 0);

				if (distance >= vm.ballMoveRadius) {
					distance = vm.ballMoveRadius;
				}

				let angle = Math.atan2((ttop - 0), (tleft - 0));
				vm.left = Math.cos(angle) * distance;
				vm.top = Math.sin(angle) * distance;

				vm.stickHeight = distance;
				vm.angle = angle;
			},
			onTouchEnd(e) {
				const vm = this;

				vm.inDraging = false;
				vm.stickHeight = vm.left = vm.top = 0;
				vm.$emit("onJoyStickCancel");
			},
			loopFunc() {
				const vm = this;
				if (vm.inDraging && vm.stickHeight > 0) {
					let rotate = vm.angle / (3.14159 / 180);
					if (rotate >= -90) {
						rotate = rotate + 90
					} else {
						rotate = rotate + 450
					}
					let name8 = ''
					let dir8 = ''
					if ((rotate >= 0 && rotate < 22.5) || rotate >= 337.5) {
						dir8 = 'up'
						name8 = '上'
					} else if (rotate >= 22.5 && rotate < 67.5) {
						dir8 = 'right_up'
						name8 = '右上'
					} else if (rotate >= 67.5 && rotate < 112.5) {
						dir8 = 'right'
						name8 = '右'
					} else if (rotate >= 112.5 && rotate < 157.5) {
						dir8 = 'right_down'
						name8 = '右下'
					} else if (rotate >= 157.5 && rotate < 202.5) {
						dir8 = 'down'
						name8 = '下'
					} else if (rotate >= 202.5 && rotate < 247.5) {
						dir8 = 'left_down'
						name8 = '左下'
					} else if (rotate >= 247.5 && rotate < 292.5) {
						dir8 = 'left'
						name8 = '左'
					} else if (rotate >= 292.5 && rotate < 337.5) {
						dir8 = 'left_up'
						name8 = '左上'
					}


					let name4 = ''
					let dir4 = ''
					if ((rotate >= 0 && rotate < 45) || rotate >= 315) {
						dir4 = 'up'
						name4 = '上'
					} else if (rotate >= 45 && rotate < 135) {
						dir4 = 'right'
						name4 = '右'
					} else if (rotate >= 135 && rotate < 225) {
						dir4 = 'down'
						name4 = '下'
					} else if (rotate >= 225 && rotate < 315) {
						dir4 = 'left'
						name4 = '左'
					}

					vm.$emit("onJoyStickUpdate", {
						angle: vm.angle,
						name8: name8,
						dir8: dir8.toUpperCase(),
						name4: name4,
						dir4: dir4.toUpperCase(),
						x: vm.left,
						y: vm.top,
						rotate: rotate,
						strength: vm.stickHeight / vm.ballMoveRadius,
					});
				}
			}
		}
	}
</script>

<style>
	.toucharea {
		position: absolute;
		z-index: 4;
		transform: translate(-50%, -50%);
		border-radius: 50%;
	}

	.ball {
		position: absolute;
		z-index: 3;
		transform: translate(-50%, -50%);
	}

	.stick {
		position: absolute;
		z-index: 2;
	}

	.ball.animation {
		transition: left .1s ease-out, top .1s ease-out;
	}

	.stick.animation {
		transition: all .2s ease-out;
	}

	.bottom {
		position: absolute;
		z-index: 1;
		transform: translate(-50%, -50%);
	}
</style>